<template>
  <form @submit.prevent="addTask">
    <input v-model="newTodoText" placeholder="输入新的待办事项">
    <button type="submit">添加</button>
  </form>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const newTodoText = ref('');
const emits = defineEmits(['addTask']);

const addTask = () => {
  if (newTodoText.value.trim()) {
    emits('addTask', newTodoText.value.trim());
    newTodoText.value = '';
  }
};
</script>

<style scoped>
form {
  display: flex;
  margin-bottom: 20px;
}

input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 20px;
  margin-left: 10px;
  background-color: #20b2aa;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #1e90ff;
}
</style>    